import React, { FC, useState, useEffect } from "react";
import { FileTextOutlined, SettingOutlined } from "@ant-design/icons";
import { Tabs } from "antd";
import PropComponent from "../PropComponent";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import PageSetting from "../PageInfo";
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
const CBN = classNames.bind(style);
const RightPanel: FC = () => {
  const { selectedId } = useGetComponentInfo_redux();
  const [ActiveKey, setActiveKey] = useState("componentLib");
  useEffect(() => {
    if (selectedId == "") {
      setActiveKey("layers");
    } else {
      setActiveKey("componentLib");
    }
  }, [selectedId]);
  const tabList = [
    {
      key: "componentLib",
      label: `属性`,
      icon: <FileTextOutlined />,
      children: <PropComponent></PropComponent>,
    },
    {
      key: "layers",
      label: `页面设置`,
      icon: <SettingOutlined />,
      children: <PageSetting></PageSetting>,
    },
  ];
  return <Tabs items={tabList} activeKey={ActiveKey}></Tabs>;
};

export default RightPanel;
